<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Small-World Model</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
        #sigma-container {
            max-width: 800px;
            height: 800px;
            margin: auto;
        }
    </style>
  </head>
  
  <body>
  
 
             节点数    &nbsp  :<input type="text" id="nodes"/><br>
              平均度数             :<input type="text" id="degree"/>
              <div style="position:absolute;left:250px;top:10px;">
              
               <button type="button" id="creat_net" style="width:50px;height:50px" name="type">生成网络</button> </div>
            
      <br>
      <br>
      <br>
       
       <div style="position:absolute;left:600px;top:20px;">
        threshold:<input type="text"   class="form-control input-sm"  id="threshold"/>
        
        <button type="button" id="cascadeInfo" style="width:50px;height:50px" name="type">开始传播</button>
         <button type="button"   id="restore" style="height:50px; width:50px"  name="type">还原网络</button>  </div>
         
         
  
   <div id="sigma-container"></div>
<script src="<%=path%>/xingkong/js/sigma.min.js"></script>
<script src="<%=path%>/xingkong/js/jquery.min.js"></script>
<script src="<%=path%>/xingkong/js/jquery-scrolltofixed-min.js"></script>
<script src="<%=path%>/xingkong/js/highlight.pack.js"></script>
<script src="<%=path%>/xingkong/js/sigma.plugins.animate.min.js"></script>
<script src="<%=path%>/xingkong/js/sigma.parsers.json.min.js"></script>
<script src="<%=path%>/xingkong/js/sigma.plugins.neighborhoods.min.js"></script>
<script src="<%=path%>/xingkong/js/highlight.pack.js"></script>
<!--<script src="../js/index.js"></script>-->
<script src="<%=path%>/xingkong/js/surprise.min.js"></script>
<script>
 sigma.classes.graph.addMethod('neighbors', function(nodeId) {
        var k,
                neighbors = {},
                index = this.allNeighborsIndex[nodeId] || {};

        for (k in index)
            neighbors[k] = this.nodesIndex[k];

        return neighbors;
    });
var flag=0;
var cascadeinfojson;
var mysigma;
 sigma.parsers.json(
            '<%=path%>/liutao/data/data.json',
            {
                container: 'sigma-container'
            },
            function(s) {
            	mysigma=s;
            	mysigma.settings({
				edgeColor : 'default',
				defaultEdgeColor : '#ccc',
				});
				
				mysigma.graph.nodes().forEach(function(n) {
				n.originalColor ="#34495E";
				n.color="#34495E";
				});
				
				
				//mysigma.graph.nodes()[0].color='#f00';
				mysigma.graph.nodes()["0"].color='#E74C3C';
				mysigma.graph.nodes()["0"].originalColor='#E74C3C';
			
			
				mysigma.refresh();
                   // When a node is clicked, we check for each node
                // if it is a neighbor of the clicked one. If not,
                // we set its color as grey, and else, it takes its
                // original color.
                // We do the same for the edges, and we only keep
                // edges that have both extremities colored.
                mysigma.bind('clickNode', function(e) {
                    var nodeId = e.data.node.id,
                            toKeep = mysigma.graph.neighbors(nodeId);
                             toKeep[nodeId] = e.data.node;

                    mysigma.graph.nodes().forEach(function(n) {
                        if (toKeep[n.id]){
                            if(flag==0){
                              console.log("6");
                                n.color = n.originalColor;
                                }
                            else{
                              console.log("7");
                                n.color=n.color;
                                }
                            }
                        else
                            n.color = '#eee';
                           
                    });

                    mysigma.graph.edges().forEach(function(e) {
                        if (toKeep[e.source] && toKeep[e.target])
                            e.color = e.originalColor;
                        else
                            e.color = '#eee';
                    });

                    // Since the data has been modified, we need to
                    // call the refresh method to make the colors
                    // update effective.
                    mysigma.refresh();
                });
                 // When the stage is clicked, we just color each
                // node and edge with its original color.
                mysigma.bind('clickStage', function(e) {
                 mysigma.graph.nodes().forEach(function(n) {
                  n.color = n.originalColor;
                   })
                if(flag==1){
                console.log("9");
                 cascadeinfojson.forEach(function(cascadeNodeList) {
            	           //console.log("第"+(++count)+"次迭代");
                         	//count++;
                         	cascadeNodeList.forEach(function(nodeID){
            		       //console.log(nodeID+"  ");
            		       mysigma.graph.nodes()[nodeID].color='#E74C3C';
            	           });
            	           mysigma.refresh();
            	     
      		                  });
                }
                 
                    //edge
                    mysigma.graph.edges().forEach(function(e) {
                        e.color = e.originalColor;
                    });

                    // Same as in the previous event:
                    mysigma.refresh();
                });
           }
        );
   function submitPara(){
   $.ajax({
		type:"post",//请求方式
	    url:"servlet/lliutaoservlet",//发送请求地址
	    dataType:"json",
	    data:{
	                        flag:"lt",
							nodes:$("#nodes").val(),
							degree:$("#degree").val(),
							threshold:$("#threshold").val(),
			},
			success:function(data){
			console.log("return succes");
			// document.execCommand('Refresh') ;
			 location.reload('ture');
			}
	 });
   }
   function showCascadeInfo(){
	$.ajax({
		type:"post",//请求方式
	    url:"servlet/lliutaoservlet",//发送请求地址
	    dataType:"json",
	     data:{
	             flag:"tao",
			},
		//请求成功后的回调函数有两个参数
				success:function(data){
				console.log("diffuse");
			    cascadeinfojson=eval(data); //解析json对象 
			//var count=0; 
            cascadeinfojson.forEach(function(cascadeNodeList) {
            	//console.log("第"+(++count)+"次迭代");
            	//count++;
            	cascadeNodeList.forEach(function(nodeID){
            		//console.log(nodeID+"  ");
            		mysigma.graph.nodes()[nodeID].color='#E74C3C';
            	});
            	 mysigma.refresh();
            	// delay 1s
            	 
      		});
      		
		}
	});
	}
	$("#cascadeInfo").bind("click",function(){
	flag=1;
	        //console.log("hehe");
  			showCascadeInfo();
  			
		});
		
	$("#creat_net").bind("click",function(){
	      console.log("submit");
  			submitPara();
  			
		});
		
		$("#restore").bind("click",function(){
	        flag=0;
	        console.log("restore");
  			 mysigma.graph.nodes().forEach(function(n) {
                        n.color = n.originalColor;
                    });
                    mysigma.graph.edges().forEach(function(e) {
                        e.color = e.originalColor;
                    });

                    // Same as in the previous event:
                    mysigma.refresh();
  			
		});
  
	
	
</script>
  </body>
</html>
